<script setup>
import { onMounted, defineProps, defineEmits, toRefs } from 'vue';

const props = defineProps({
    headTitle: {
        type: String,
        default: 'HeadTitle',
    },
    subTitle: {
        type: String,
        default: 'SubTitle',
    },
});
</script>
<template>
    <div class="content-box">
        <div class="content-head">
            {{ props.headTitle }}
            <div class="sub-title">
                {{ props.subTitle }}
            </div>
        </div>
        <div class="content-body">
            <div style="width: 100%; height: 100%">
                <slot></slot>
            </div>
        </div>
    </div>
</template>
<style lang="less" scoped>
.content-box {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    .content-head {
        font-size: 16px;
        font-weight: 800;
        .sub-title {
            height: 24px;
            line-height: 24px;
            font-weight: normal;
            font-size: 12px;
        }
    }
    .content-body {
        // background-color: rgba(255, 255, 255, 0.15);
        height: calc(100% - 56px);
    }
}
</style>
